Topic 1 – Some basics of CSS rules and how they are used to style HTML.
Every HTML element has style properties that can be set with CSS. The properties
relate to the different visual aspects of the element, such as its position onscreen,
the width of its border, the color, the size, and fonts of its text, etc. CSS is a
mechanism for selecting HTML elements and then setting the selected elements’
their CSS properties. </html> - Here you see the use of the HTML style tag. This
tag allows you to add CSS styles directly into your document. The browser will
apply the CSS styles within the style tag to the HTML elements within the <body>
- tag.
Topic 2 – Some style elements of CSS.
There are three ways to add CSS to your Web pages – embedded, inline, and
linked from a CSS style sheet. Inline style declarations are added to a tag using the
HTML style attribute. Ex) <p>This paragraph simply takes on the browser’s
default paragraph style. Embedded CSS styles are placed in the head of the HTML
document. Ex) <head> other head elements (e.g., meta tags, title) go here - style
type=”text/css”> h1 {font-size:16px;} p {color:blue;} Linked styles - When
creating your site of more than one page you can place your styles in a separate
document – a style sheet. A style sheet is a text file with the .css extension. You
can link your style sheet to as many HTML pages as you need with a single line of
code in the head tag of each page.
Topic 3 – Many declarations can be contained within a rule in CSS.
For instance, type in your CSS - p {color:red; font-size:12px; font-weight:bold;}
Now you have made the paragraph text red, 12 pixels high, and bold! Do not forget
that each declaration ends with a semicolon to separate it from the next. What’s
cool is that multiple selectors can be grouped, h1, h2, and h3 tags to be blue and
bold, you could type this - h1 {color:blue; font-weight:bold;} h2 {color:blue; font-
weight:bold;h3 {color:blue; font-weight:bold;}.